import swsj1f from "../../../../imgs/1f-swsj.png";
import hxsj2f from "../../../../imgs/2f-hxsj.png";
import nzl3f from "../../../../imgs/3f-nzl.png";
import yqsb4f from "../../../../imgs/4f-yqsb.png";
import product1 from "../../../../imgs/product-1.jpg";
import HttpUtils from "../../common/utils/HttpUtils";
import ImageWithError from "../../common/comps/ImageWithError.js";
import EventApi from "@module/EventApi";

export default class ProductSection extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: -1
        };
        this.lists = [1, 2, 3, 4, 5, 6, 7, 8];

        this.titles = [
            "1F 生物试剂",
            "2F 实验服务",
            "3F 危险化学品",
            "4F 元器件"
        ];
        this.subTitles = [
            "分子生物学",
            "免疫学",
            "蛋白组学",
            "细胞生物学",
            "微生物学"
        ];
        this.imgs = [
            swsj1f,
            hxsj2f,
            nzl3f,
            yqsb4f,
            swsj1f,
            hxsj2f,
            nzl3f,
            yqsb4f,
            swsj1f,
            hxsj2f,
            nzl3f,
            yqsb4f,
        ];
    }

    render() {
        if (global.hasLogin) {
            return this.renderLoginProductSection();
        }

        const { index, item } = this.props;
        const { fistLevelCategoryName, secondLevelCategories, products } = item;
        let secondLevelCategories_ = secondLevelCategories;
        let products_ = products;
        if (secondLevelCategories && secondLevelCategories.length > 12) {
            secondLevelCategories_ = secondLevelCategories.slice(0, 12);
        }
        if (products && products.length > 10) {
            products_ = products.slice(0, 10);
        }

        const { selected } = this.state;
        return (
            <div className={"app-content-warpper-1"}>
                <div
                    style={{
                        display: "flex",
                        width: 1200,
                        position: "relative"
                    }}
                >
                    <div
                        id={`product-section-box-${index}`}
                        className={"product-section-box"}
                    >
                        <div className={"product-section-left"}>
                            <img src={this.imgs[index - 1]} alt="" />
                            <div className="product-section-left-content">
                                <p
                                    style={{
                                        color: "#fff",
                                        fontSize: 24,
                                        marginTop: 32,
                                        marginLeft: 22,
                                        marginBottom: 24
                                    }}
                                >{`${index}F ${fistLevelCategoryName ||
                                    ""}`}</p>
                                {secondLevelCategories_ &&
                                    secondLevelCategories_.map(
                                        (item, index) => (
                                            <div
                                                key={index}
                                                onClick={() => {
                                                    // console.log("wewew");
                                                    EventApi.emit(
                                                        "searchItemClick",
                                                        {
                                                            key:
                                                                item.secondLevelCategoryName
                                                        }
                                                    );
                                                    $state.go({
                                                        stateName:
                                                            "/searchProduct",
                                                        params: {
                                                            key:
                                                                item.secondLevelCategoryName,
                                                            catId:
                                                                item.secondLevelCategoryId,
                                                            cateFlag: true
                                                        }
                                                    });
                                                }}
                                                className={
                                                    "product-section-left-item-title"
                                                }
                                            >
                                                <p>
                                                    {
                                                        item.secondLevelCategoryName
                                                    }
                                                </p>
                                            </div>
                                        )
                                    )}
                            </div>
                        </div>
                        <div className={"product-section-center"}>
                            {products_ &&
                                products_.map((item, index) => {
                                    const {
                                        productPhoto,
                                        productName,
                                        productPrice,
                                        productId,
                                        suppId,
                                        suppName
                                    } = item;
                                    return (
                                        <div
                                            key={index}
                                            onClick={() => {
                                                window.open(
                                                    `#detail?productId=${productId}&suppId=${suppId}`
                                                );
                                            }}
                                            className={
                                                selected == index
                                                    ? "product-section-center-item-choose"
                                                    : this.getClassName(index)
                                            }
                                            onMouseOver={() => {
                                                this.setState({
                                                    selected: index
                                                });
                                            }}
                                            onMouseOut={() => {
                                                this.setState({
                                                    selected: -1
                                                });
                                            }}
                                        >
                                            <ImageWithError
                                                src={productPhoto}
                                                className={
                                                    "product-section-item-img"
                                                }
                                            />
                                            <p
                                                className={
                                                    "product-section-item-title"
                                                }
                                            >
                                                {productName}
                                            </p>
                                            {global.hasLogin && (
                                                <p
                                                    className={
                                                        "product-section-item-price"
                                                    }
                                                >{`￥${productPrice}`}</p>
                                            )}
                                            <p
                                                onClick={e => {
                                                    e.stopPropagation();
                                                    window.open(
                                                        `#supplierShop?suppId=${suppId}`
                                                    );
                                                }}
                                                className={
                                                    "product-section-item-seller"
                                                }
                                                dangerouslySetInnerHTML={{
                                                    __html: Filter.cutString(
                                                        this.strReplace(
                                                            suppName
                                                        ),
                                                        10,
                                                        1
                                                    )
                                                }}
                                            />
                                        </div>
                                    );
                                })}
                        </div>

                        {/*<div className={"product-section-right"} />*/}
                    </div>
                </div>
            </div>
        );
    }

    getClassName(index) {
        if (index == 9) {
            return "product-section-center-item";
        } else if (index == 4) {
            return "product-section-center-item  product-item-border-bottom";
        } else if (index >= 5) {
            return "product-section-center-item product-item-border-right";
        } else {
            return "product-section-center-item product-item-border-right product-item-border-bottom";
        }
    }

    //登录后接口字段返回的不相同
    renderLoginProductSection() {
        const { index, item } = this.props;
        const { name, subList, productList } = item;
        let secondLevelCategories_ = subList;
        let products_ = productList;
        if (subList && subList.length > 12) {
            secondLevelCategories_ = subList.slice(0, 12);
        }
        if (productList && productList.length > 10) {
            products_ = productList.slice(0, 10);
        }
        const { selected } = this.state;
        return (
            <div className={"app-content-warpper-1"}>
                <div
                    style={{
                        display: "flex",
                        width: 1200,
                        position: "relative"
                    }}
                >
                    <div
                        id={`product-section-box-${index}`}
                        className={"product-section-box"}
                    >
                        <div className={"product-section-left"}>
                            <img src={this.imgs[index - 1]} alt="" />
                            <div className="product-section-left-content">
                                <p
                                    style={{
                                        color: "#fff",
                                        fontSize: 24,
                                        marginTop: 32,
                                        marginLeft: 22,
                                        marginBottom: 24
                                    }}
                                >{`${index}F ${name || ""}`}</p>
                                {secondLevelCategories_ &&
                                    secondLevelCategories_.map(
                                        (item, index) => (
                                            <div
                                                key={index}
                                                onClick={() => {
                                                    EventApi.emit(
                                                        "searchItemClick",
                                                        {
                                                            key: item.name
                                                        }
                                                    );
                                                    $state.go({
                                                        stateName:
                                                            "/searchProduct",
                                                        params: {
                                                            key: item.name,
                                                            catId: item.id,
                                                            cateFlag: true
                                                        }
                                                    });
                                                }}
                                                className={
                                                    "product-section-left-item-title"
                                                }
                                            >
                                                <p>{item.name}</p>
                                            </div>
                                        )
                                    )}
                            </div>
                        </div>
                        <div className={"product-section-center"}>
                            {products_ &&
                                products_.map((item, index) => {
                                    const {
                                        photo,
                                        name,
                                        sn,
                                        suppId,
                                        price,
                                        suppName
                                    } = item;
                                    return (
                                        <div
                                            key={index}
                                            onClick={() => {
                                                window.open(
                                                    `#detail?productId=${sn}&suppId=${suppId}`
                                                );
                                            }}
                                            className={
                                                selected == index
                                                    ? "product-section-center-item-choose"
                                                    : this.getClassName(index)
                                            }
                                            onMouseOver={() => {
                                                this.setState({
                                                    selected: index
                                                });
                                            }}
                                            onMouseOut={() => {
                                                this.setState({
                                                    selected: -1
                                                });
                                            }}
                                        >
                                            <ImageWithError
                                                src={photo}
                                                className={
                                                    "product-section-item-img"
                                                }
                                            />
                                            <p
                                                className={
                                                    "product-section-item-title"
                                                }
                                            >
                                                {name}
                                            </p>
                                            {global.hasLogin && (
                                                <p
                                                    className={
                                                        "product-section-item-price"
                                                    }
                                                >{`￥${price &&
                                                    price.toFixed(2)}`}</p>
                                            )}
                                            <p
                                                onClick={e => {
                                                    e.stopPropagation();
                                                    window.open(
                                                        `#supplierShop?suppId=${suppId}`
                                                    );
                                                }}
                                                className={
                                                    "product-section-item-seller"
                                                }
                                                dangerouslySetInnerHTML={{
                                                    __html: Filter.cutString(
                                                        this.strReplace(
                                                            suppName
                                                        ),
                                                        10,
                                                        1
                                                    )
                                                }}
                                            />
                                        </div>
                                    );
                                })}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    strReplace(str) {
        return str && str.replace("&#40;", "(");
    }
}
